import styles from './index.less';
import {
  IRouteComponentProps,
  Link,
  Loading,
  TagModelState,
  useIntl,
  useSelector,
} from 'umi';

const tagmiddle= () => {
  const intl = useIntl();
  const { tag } = useSelector(
    (state: { tag: TagModelState; loading: Loading }) => {
      return {
        tag: state.tag,
        loading: state.loading,
      };
    },
  );
  console.log(localStorage.getItem('tagid'));
  
  return (
    <div className={styles.tagmiddle}>
      <div className={styles.tagmiddletitle}>
        <span>{intl.formatMessage({ id: 'tagTitle' })}</span>
      </div>
      <ul>
        {tag.tag.map((item) => {
          return (
            <li
              key={item.id}
              className={localStorage.getItem('tagid')=== item.value ? styles.action : ''}
            >
              <Link to={`/tag/${item.value}`}>
                {item.label}
                <span>[{item.articleCount}]</span>
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
};
export default tagmiddle;
